<template>
  <el-form-item label="品牌分区" prop="categoryId" :rules="{ required: true, message: '请选输入', trigger: 'change' }">
    <el-cascader
      placeholder="请选择分区"
      :props="props"
      v-model="brandForm.categoryId"
      @change="handleChange">
    </el-cascader>
  </el-form-item>
</template>

<script>
  import { getCategoryReq } from '@/api/product'
  import { mapGetters } from 'vuex'

  export default {
    name: "category",
    data() {
      return {
        props: {
          lazy: true,// 可以理解为开关，什么时候结束
          lazyLoad: this.getData
        },
      }
    },
    methods: {
      handleChange(value){
        console.log(value)
      },
      getData(node,resolve){
        const level = node.level
        let result;

        if (level === 0){
          getCategoryReq().then(response => {
            console.log(response)
            if (response.state === true) {
              result = response.data.category;
              result.forEach(item => {
                item.value = item.categoryId;
                item.label = item.categoryName
                item.leaf = level >= 0
              })
              console.log("result =" + result)
              resolve(result)
              this.$notify.success({title: '成功',message: response.message, duration: 1500});
            } else {
              this.$notify.warning({ title: '失败', message: response.message, duration: 1500 });
            }
          })
        }
      },
    },
    computed: {
      ...mapGetters(['brandForm']),//数组写法
    },
    beforeMount() {
    }
  };
</script>


<style scoped>

</style>
